<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>字典类型管理-主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
    <style>
        .message_box{
            display: flex;
            align-items: center;
            background-color: #e6f7ff;
            border: 1px solid #91d5ff;
            box-sizing: border-box;
            padding: 8px 15px 14px 10px;
            margin: 10px 2.5% 25px 0px;
            border-radius: 4px
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-row">
        <!-- 字典类型查询条件 -->
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md5 layui-col-lg5">
            <fieldset class="table-search-fieldset">
                <legend>搜索条件(<b style="color: #1E9FFF;cursor: pointer">收起--展开</b>)</legend>
                <form class="layui-form layui-form-pane" lay-filter="search-form" id="search-form" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">类型名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="dictTypeName" autocomplete="off" class="layui-input" placeholder="请输入">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-bg-blue"  lay-submit lay-filter="search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
                            <button type="reset" class="layui-btn layui-btn-primary"  lay-submit lay-filter="reset-btn"><i class="layui-icon layui-icon-refresh"></i> 重 置</button>
                        </div>
                    </div>
                </form>
            </fieldset>
            <!-- 字典类型表格头部左侧工具栏 -->
            <script type="text/html" id="dictTypeToolbar">
                <div class="layui-btn-group layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i>刷新</button>
                </div>
            </script>
            <!-- 字典类型表格 -->
            <table class="layui-hide" id="dictTypeList" lay-filter="dictTypeListFilter"></table>
            <!-- 字典类型操作列 -->
            <script type="text/html" id="dictTypeRowsBar">
                {{#
                var html = '<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
                if(0 === d.dictTypeStatus){
                html+= '<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="disable"><i class="layui-icon layui-icon-close"></i>禁用</a>';
                }else if(1 === d.dictTypeStatus){
                html+= '<a class="layui-btn layui-btn-xs" lay-event="enable"><i class="layui-icon layui-icon-ok"></i>启用</a>';
                }
                html += '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                html += '<a class="layui-btn layui-btn-xs" lay-event="config"><i class="layui-icon layui-icon-set"></i>配置</a>';
                return html;
                }}
            </script>
        </div>

        <!-- 字典明细 -->
        <div class="layui-col-xs12 layui-col-sm12 layui-col-md7 layui-col-lg7">
            <div class="message_box">
                <i class="fa fa-info-circle" style="color: #1890ff;"></i>
                <p style="margin: 0 5px">字典类型：<span class="updateTime"></span></p>
                <div style="color: #1890ff;" id="currentDictType"></div>
                <input id="currentDictTypeId" type="hidden"/>
            </div>
            <!-- 字典明细表格头部左侧工具栏 -->
            <script type="text/html" id="dictToolbar">
                <div class="layui-btn-group layui-btn-container">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="status"><i class="layui-icon layui-icon-ok"></i>禁/启用</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="refresh"><i class="layui-icon layui-icon-refresh"></i>刷新</button>、
                </div>
            </script>
            <!-- 字典明细表格 -->
            <table class="layui-hide" id="dictList" lay-filter="dictListFilter"></table>
        </div>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="UTF-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="UTF-8"></script>
<script th:src="@{/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/js/table-form.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'table','notice'], function () {
        let $ = layui.jquery,
            form = layui.form,
            notice = layui.notice,
            table = layui.table;

        let ctxPath = /*[[@{/}]]*/'';

        //渲染字典类型表格
        let dictTypeTableIns = table.render({
            elem: '#dictTypeList',
            url: ctxPath+'system/sysDictType/dictTypeList',
            title:'字典类型信息',
            height: 'full-100',
            method : 'GET',
            toolbar: '#dictTypeToolbar',                         //绑定表格头部左侧工具栏
            defaultToolbar: false,
            cols: [
                [
                    {field: 'dictTypeId', width: 120, title: '类型编码',align:'center',sort:true},
                    {field: 'dictTypeName', width: 120, title: '类型名称',align:'center',sort:true},
                    {field: 'dictTypeStatus', width: 60, title: '状态',align:'center',templet:function(d){
                            {return (0 === d.dictTypeStatus) ? '启用' : '作废'}
                        }},
                    {title: '操作', minWidth: 200, toolbar: '#dictTypeRowsBar', align: 'center',fixed: 'right'}
                ]
            ],
            page: true,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15
        });
        //监听字典类型查询条件提交按钮
        form.on('submit(search-btn)', function (data) {
            //执行搜索重载
            table.reload('dictTypeList', {
                page: {curr: 1},
                where: form.val('search-form')
            }, 'data');
            return false;
        });
        //监听字典类型表格头部工具栏事件
        table.on('toolbar(dictTypeListFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddOrUpdateDictTypeDialog();
                    break;
                case 'refresh':                                 //刷新
                    dictTypeTableIns.reload();
                    break;
            };
        });
        //监听表格行操作列事件
        table.on('tool(dictTypeListFilter)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    openAddOrUpdateDictTypeDialog(obj.data.dictTypeId);
                    break;
                case 'enable':
                    updateDictTypeStatus(obj.data.dictTypeId,'0');
                    break;
                case 'disable':
                    updateDictTypeStatus(obj.data.dictTypeId,'1');
                    break;
                case 'delete':
                    dealDictType(obj.data.dictTypeId);
                    break;
                case 'config':
                    $('#currentDictType').text(obj.data.dictTypeName + '（' + obj.data.dictTypeId + '）');
                    $('#currentDictTypeId').val(obj.data.dictTypeId);
                    table.reload('dictList', {
                        page: {curr: 1},
                        where: {dictTypeId: obj.data.dictTypeId}
                    });
                    break;
            };
        });
        //打开添加或修改字典类型页面
        function openAddOrUpdateDictTypeDialog(dictTypeId) {
            let url = ctxPath+'system/sysDictType/dictTypeAddOrUpdate';
            let title = '<i class="layui-icon layui-icon-read">新增字典类型</i>';
            if(dictTypeId){
                url = url+"?dictTypeId="+dictTypeId;
                title = '<i class="layui-icon layui-icon-read">更新字典类型</i>';
            }
            layer.open({
                title: title,
                type: 2,
                shade: 0.2,
                shadeClose: true,
                offset:'r',
                area: ['35%', '100%'],
                content: url
            });
        }
        //批量删除字典类型
        function dealDictType(datas) {
            if(datas.length === 0){
                notice.warning('请选择需要删除的记录！');
                return;
            }
            layer.confirm('您确定要删除选中的记录及其所有子级记录？',{title:"提示",icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'DELETE',
                    url:ctxPath+'system/sysDictType/deleteDictType/'+datas,
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            notice.success('删除成功',function(){
                                dictTypeTableIns.reload();
                            });
                        }else{
                            notice.error(res.msg);
                        }
                    }
                });
            })
        }

        //更新字典类型状态
        function updateDictTypeStatus(dictTypeId,flag) {
            if(null === dictTypeId){
                notice.warning('请选择需要更新的记录！');
                return;
            }
            let statusDesc = (0 === flag) ? '启用' : '作废';
            layer.confirm('您确定要'+statusDesc+'选中的记录？',{title:'提示',icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'PUT',
                    url:ctxPath+'system/sysDictType/updateDictTypeStatus/',
                    data:{'dictTypeId':dictTypeId,'dictTypeStatus':flag},
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            notice.success('更新成功',function(){
                                dictTypeTableIns.reload();
                            });
                        }else{
                            notice.error(res.msg);
                        }
                    }
                });
            })
        }

        //-------------------------------------------------字典明细-------------------------------------------------------------
        //渲染字典明细表格
        let dictTableIns = table.render({
            elem: '#dictList',
            url: ctxPath+'system/sysDict/dictList',
            where: {dictTypeId: $('#currentDictTypeId').val()},
            title:'字典信息',
            height: 'full-90',
            method : 'GET',
            toolbar: '#dictToolbar',                         //绑定表格头部左侧工具栏
            defaultToolbar: false,
            cols: [
                [
                    {type: 'radio', minWidth: 80,align:'center'},
                    {field: 'dictId', width: 120, title: '字典编码',align:'center',sort:true},
                    {field: 'dictName', width: 120, title: '字典名称',align:'center',sort:true},
                    {field: 'dictTStatus', width: 60, title: '状态',align:'center',templet:function(d){
                            {return (0 === d.dictStatus) ? '启用' : '作废'}
                    }},
                    {field: 'dictSort', width: 100, title: '排序码',align:'center',sort:true},
                    {field: 'remark', width: 180, title: '备注',align:'center'},
                    {field: 'py', width: 80, title: '拼音码',align:'center'},
                    {field: 'wb', width: 80, title: '五笔码',align:'center'}
                ]
            ],
            page: true,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15
        });
        //监听字典明细表格头部工具栏事件
        table.on('toolbar(dictListFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddOrUpdateDictDialog();
                    break;
                case 'edit':
                    let checkEdit = table.checkStatus(obj.config.id);
                    openAddOrUpdateDictDialog(checkEdit.data);
                    break;
                case 'status':
                    let checkStatus = table.checkStatus(obj.config.id);
                    updateDictStatus(checkStatus.data);
                    break;
                case 'delete':
                    let checkDelete = table.checkStatus(obj.config.id);
                    dealDict(checkDelete.data);
                    break;
                case 'refresh':                                 //刷新
                    dictTableIns.reload();
                    break;
            };
        });
        //打开添加或修改字典明细页面
        function openAddOrUpdateDictDialog(data) {
            let url = ctxPath+'system/sysDict/dictAddOrUpdate';
            let title = '';
            if(data){
                if(data.length === 0){
                    notice.warning('请选择需要编辑的字典记录！');
                    return;
                }
                url = url+"?dictTypeId="+data[0].dictTypeId+"&dictId="+data[0].dictId;
                title = '<i class="layui-icon layui-icon-gift">更新字典</i>';
            }else{
                let currentDictTypeId = $('#currentDictTypeId').val();
                if(currentDictTypeId=== null ||currentDictTypeId === ''){
                    notice.warning("请选择字典类型后再新增字典！");
                    return;
                }
                url = url+"?dictTypeId="+currentDictTypeId;
                title = '<i class="layui-icon layui-icon-gift">新增字典</i>';
            }
            layer.open({
                title: title,
                type: 2,
                shade: 0.2,
                shadeClose: true,
                offset:'r',
                area: ['35%', '100%'],
                content: url,
                end: function (index, layero) {
                    dictTableIns.reload();
                }
            });
        }
        //删除字典明细
        function dealDict(data) {
            if(data.length === 0){
                notice.warning('请选择需要删除的记录！');
                return;
            }
            layer.confirm('您确定要删除选中的记录？',{title:"提示",icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'DELETE',
                    url:ctxPath+'system/sysDict/deleteDict/'+data[0].dictTypeId+'/'+data[0].dictId,
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            notice.success('删除成功',function(){
                                dictTableIns.reload();
                            });
                        }else{
                            notice.error(res.msg);
                        }
                    }
                });
            })
        }
        //更新字典明细状态
        function updateDictStatus(data) {
            if(0 === data.length){
                notice.warning('请选择需要更新的字典记录！');
                return;
            }
            let statusDesc = (0 === data[0].dictStatus) ? '作废' : '启用';
            layer.confirm('您确定要'+statusDesc+'选中的字典记录？',{title:'提示',icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'PUT',
                    url:ctxPath+'system/sysDict/updateDictStatus/',
                    data:{'dictTypeId':data[0].dictTypeId,'dictId':data[0].dictId,'dictStatus':(0 === data[0].dictStatus) ? 1 : 0},
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            notice.success('更新成功',function(){
                                dictTableIns.reload();
                            });
                        }else{
                            notice.error(res.msg);
                        }
                    }
                });
            })
        }
    });
</script>
</body>
</html>
